<!--
 * @Description  : 书籍详情
 * @Author       : YiDing Xue
 * @Date         : 2023-02-23
 * @LastEditors  : YiDing Xue
 * @LastEditTime : 2023-02-27
-->
<template>
  <AppPage :placeholder="false" class="bg-[#f4f4f4]" article-class="p-0" header-class="b-[rgba(0,0,0,.05)] ">
    <template #center>
      <van-tabs w-200 opacity-100 background="none" title-active-color="#fff" title-inactive-color="#fff">
        <van-tab title="有声书" name="有声书" />
        <van-tab title="电子书" name="电子书" />
        <van-tab title="纸质书" name="纸质书" />
      </van-tabs>
    </template>

    <!-- 有声书 -->
    <section>
      <div class="h-70vh">
        <van-image width="100vw" height="50vh" :src="dataList.albumImage" />
        <div bg-white absolute left-4vw bottom-1 w-92vw>
          <div class="h-180 p-20 c-[#717170]">
            <div flex justify-between items-center>
              <h3 font-500 c-black>{{ dataList.albumName }}</h3>
              <van-icon size="24" name="star-o" />
            </div>
            <p text-12 my-10>{{ dataList.albumAuthor }}</p>
            <div class="van-hairline--bottom pt-10"></div>
            <div class="van-multi-ellipsis--l2 text-12 mt-20">{{ dataList.albumIntro }}</div>
          </div>
        </div>
      </div>
      <van-tabs class="tab-bottom mx-10" background="none" color="#fcd006">
        <van-tab title="介绍">
          <van-divider :style="{ color: '#000', borderColor: '#e8e8e8', padding: '0 16px' }">编辑推荐</van-divider>
          <p class="text-14 c-[#8e8e8e]">{{ dataList.albumIntro }}</p>
          <van-divider :style="{ color: '#000', borderColor: '#e8e8e8', padding: '0 16px' }">购买须知</van-divider>
          <div class="text-12 px-20 py-30 c-[#8e8e8e] bg-white m-25">
            <p>1. 本平台除特别标注外所有内容均为付费商品，购买后即可永久使用。平台除纸书外的所有内容均为虚拟内容服务，一经购买无法退款，请您谅解。</p>
            <p>2. 如您在购买、使用中有任何问题，可联系客服解决（在线时间 10:00:-17:00）</p>
          </div>
        </van-tab>
        <van-tab title="目录">内容 2</van-tab>
      </van-tabs>
    </section>

    <footer class="footer-border fixed text-12 flex justify-around w-100vw bg-white bottom-0">
      <div text-center py-5>
        <van-icon name="wap-home" size="24" />
        <p>啊啊啊出版社</p>
      </div>
      <div text-center py-5>
        <van-icon name="wap-home" size="24" />
        <p>啊啊啊出版社</p>
      </div>
      <div text-center py-5>
        <p>￥{{ dataList.albumPrice }}</p>
        <van-button type="default">购买</van-button>
      </div>
    </footer>
    <footer h-55 />
  </AppPage>
</template>

<script setup>
import { dataList } from '~/mock/mock'
const route = useRoute()
console.log(route.query)
</script>
<style lang="scss">
.tab-bottom {
  .van-tabs__wrap {
    border-bottom: 1px solid #e8e8e8;
  }
}
.footer-border {
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
}
.a {
  position: fixed;
  border-radius: 1;
}
</style>
